<!--档案目录查询-->
<template>
  <div class="query-search">
    <splitpanes horizontal>
      <pane size="65">
        <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)', padding: '12px 12px 0' }">
          <div slot="title">
            <div class="top-icon">
              <icon-font type="icon-chaxun1" />
            </div>
            <span>档案目录查询</span>
          </div>
          <div slot="extra">
            <a-input-search placeholder="请输入内容" enter-button />
          </div>
          <el-table
            :data="floderTableData"
            highlight-current-row
            border
            height="calc(100% - 40px)"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <el-table-column type="expand">
              <div class="table-expand">
                <ul>
                  <li v-for="(item, index) in fullList" :key="index">
                    <div class="full-icon">
                      <a-icon type="question-circle" />
                    </div>
                    <div class="full-title">{{ item.title }}</div>
                    <div class="full-btns">
                      <a-tooltip placement="bottom" class="icon-button">
                        <template slot="title">
                          <span>打开</span>
                        </template>
                        <a-button shape="circle" icon="eye"></a-button>
                      </a-tooltip>
                      <a-tooltip placement="bottom" class="icon-button">
                        <template slot="title">
                          <span>删除</span>
                        </template>
                        <a-button shape="circle" icon="delete"></a-button>
                      </a-tooltip>
                      <a-tooltip placement="bottom">
                        <template slot="title">
                          <span>下载</span>
                        </template>
                        <a-button shape="circle" icon="download"></a-button>
                      </a-tooltip>
                    </div>
                  </li>
                </ul>
              </div>
            </el-table-column>
            <slot v-for="(item,index) in floderColumns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
          </el-table>
          <div class="pagination">
            <a-pagination :default-current="4" :total="50" show-less-items />
          </div>
        </a-card>
      </pane>
      <pane size="35">
        <a-card size="small" :body-style="{ height: '100%' }">
          <el-table
            :data="fileTableData"
            highlight-current-row
            border
            height="100%"
            :row-style="{height:'40px'}"
            :cell-style="{padding:'0px'}"
            :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
            style="width: 100%">
            <el-table-column type="expand">
              <div class="table-expand">
                <ul>
                  <li v-for="(item, index) in fullList" :key="index">
                    <div class="full-icon">
                      <a-icon type="question-circle" />
                    </div>
                    <div class="full-title">{{ item.title }}</div>
                    <div class="full-btns">
                      <a-tooltip placement="bottom" class="icon-button">
                        <template slot="title">
                          <span>打开</span>
                        </template>
                        <a-button shape="circle" icon="eye"></a-button>
                      </a-tooltip>
                      <a-tooltip placement="bottom" class="icon-button">
                        <template slot="title">
                          <span>删除</span>
                        </template>
                        <a-button shape="circle" icon="delete"></a-button>
                      </a-tooltip>
                      <a-tooltip placement="bottom">
                        <template slot="title">
                          <span>下载</span>
                        </template>
                        <a-button shape="circle" icon="download"></a-button>
                      </a-tooltip>
                    </div>
                  </li>
                </ul>
              </div>
            </el-table-column>
            <slot v-for="(item,index) in fileColumns">
              <el-table-column
                :key="index"
                :property="item.field"
                :label="item.title"
                :width="item.width"
                show-overflow-tooltip
                sortable>
              </el-table-column>
            </slot>
          </el-table>
        </a-card>
      </pane>
    </splitpanes>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    Splitpanes,
    Pane
  },
  data () {
    return {
      floderTableData: [{
        Catalog_Name: '档案管理/研发中心测试全宗诉讼档案',
        Record_Remark: '12',
        Record_DateTime: '2020-05-19',
        SearchContent: '0 1984 31 1984-DQ-001 中共江西第一林党委、机构设置与成立、人员编制、干部任免、管理制度等报告、批复、通知 永久 上海市普陀区人民政府办公室 2020-04-23 00:00:00 DQ 1984-01-23 1984-12-28 1'
      }, {
        Catalog_Name: '档案管理/研发中心测试全宗诉讼档案',
        Record_Remark: '34',
        Record_DateTime: '2020-05-19',
        SearchContent: '1984 -1253220874421669888 1984-DQ-001 关于呈报成立江西省第一林业学校党委核查“三种人”小组的报告 -1207902866262593536 上海市普陀区城市建设投资有限公司 1984-03-15 2020-04-23 （84）'
      }, {
        Catalog_Name: '预立卷/研发中心测试全宗党群档案以件整理',
        Record_Remark: '56',
        Record_DateTime: '2020-05-17',
        SearchContent: '1984 -1253220874421669888 1984-DQ-001 关于成立江西省第一林业学校治安保卫委员会的通知 -1207902866262593536 市公安局交巡警总队车辆管理所 1984-03-28 2020-04-23 （84）林党字第004号 4'
      }, {
        Catalog_Name: '档案管理/研发中心测试全宗数据汇总以卷整理',
        Record_Remark: '78',
        Record_DateTime: '2020-05-06',
        SearchContent: '3 2020-04-23 -1207902866262593536 1984 1984-DQ-002 校办工厂、农（林）场情况 （84）统社字104号 11 中共上海是普陀区纪律检查委员会文件 1984-01-01 -6658992433843539968'
      }],
      floderColumns: [{
        title: '数据门类',
        field: 'Catalog_Name',
        width: 300
      }, {
        title: '数据分类',
        field: 'Record_Remark',
        width: 200
      }, {
        title: '日期',
        field: 'Record_DateTime',
        width: 100
      }, {
        title: '内容',
        field: 'SearchContent'
      }],
      fileTableData: [{
        Record_Order: 1,
        Catalog_Name: '档案管理/研发中心测试全宗诉讼档案',
        Record_Remark: '12',
        Record_DateTime: '2020-05-19',
        SearchContent: '0 1984 31 1984-DQ-001 中共江西第一林党委、机构设置与成立、人员编制、干部任免、管理制度等报告、批复、通知 永久 上海市普陀区人民政府办公室 2020-04-23 00:00:00 DQ 1984-01-23 1984-12-28 1'
      }, {
        Record_Order: 2,
        Catalog_Name: '档案管理/研发中心测试全宗诉讼档案',
        Record_Remark: '34',
        Record_DateTime: '2020-05-19',
        SearchContent: '1984 -1253220874421669888 1984-DQ-001 关于呈报成立江西省第一林业学校党委核查“三种人”小组的报告 -1207902866262593536 上海市普陀区城市建设投资有限公司 1984-03-15 2020-04-23 （84）'
      }, {
        Record_Order: 3,
        Catalog_Name: '预立卷/研发中心测试全宗党群档案以件整理',
        Record_Remark: '56',
        Record_DateTime: '2020-05-17',
        SearchContent: '1984 -1253220874421669888 1984-DQ-001 关于成立江西省第一林业学校治安保卫委员会的通知 -1207902866262593536 市公安局交巡警总队车辆管理所 1984-03-28 2020-04-23 （84）林党字第004号 4'
      }, {
        Record_Order: 4,
        Catalog_Name: '档案管理/研发中心测试全宗数据汇总以卷整理',
        Record_Remark: '78',
        Record_DateTime: '2020-05-06',
        SearchContent: '3 2020-04-23 -1207902866262593536 1984 1984-DQ-002 校办工厂、农（林）场情况 （84）统社字104号 11 中共上海是普陀区纪律检查委员会文件 1984-01-01 -6658992433843539968'
      }],
      fileColumns: [{
        title: '序号',
        field: 'Record_Order',
        width: 100
      }, {
        title: '数据门类',
        field: 'Catalog_Name',
        width: 300
      }, {
        title: '数据分类',
        field: 'Record_Remark',
        width: 200
      }, {
        title: '日期',
        field: 'Record_DateTime',
        width: 100
      }, {
        title: '内容',
        field: 'SearchContent'
      }],
      fullList: [ // 全文数据集合
        {
          title: '1.pdf'
        },
        {
          title: 'u=2422457587,3791685626&fm=26&gp=0.jpg'
        },
        {
          title: 'u=4186486800,813755701&fm=26&gp=0.jpg'
        },
        {
          title: 'loginBanner2.jpg'
        },
        {
          title: '下载.jpg'
        },
        {
          title: '微信图片_20191025135422.jpg'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.query-search {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .ant-card {
    /deep/ .ant-card-head {
      .ant-card-extra {
        width: 50%;
      }
    }
    /deep/ .ant-card-body {
      .el-table__body {
        tr {
          td {
            padding: 0;
            .table-expand {
              padding: 10px;
              ul {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                li {
                  height: 50px;
                  width: 48%;
                  border-bottom: 1px dashed #ccc;
                  display: flex;
                  align-items: center;
                  .full-icon {
                    width: 30px;
                    height: 30px;
                    background: #eee;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 20px;
                    i {
                      font-size: 16px;
                    }
                  }
                  .full-title {
                    color: #858585;
                    cursor: pointer;
                  }
                  .full-btns {
                    margin-left: auto;
                  }
                }
              }
            }
          }
        }
      }
      .pagination {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
</style>
